<template>
  <div class="active">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1">互动</el-menu-item>
      <el-menu-item index="2" disabled>实时数据</el-menu-item>
      <el-menu-item index="3" disabled>网络监控</el-menu-item>
      <el-menu-item index="4" disabled>设置</el-menu-item>
    </el-menu>
    <el-card style="margin: 10px 0" v-show="activeIndex == 1">
      <div class="propelling">推送控制</div>

      <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect2"
      >
        <el-menu-item index="1">商品</el-menu-item>
        <el-menu-item index="2" disabled>抽奖</el-menu-item>
        <el-menu-item index="3" disabled>优惠卷</el-menu-item>
        <el-menu-item index="4" disabled>公告</el-menu-item>
        <el-menu-item index="5" disabled>助力榜</el-menu-item>
      </el-menu>

      <div v-show="activeIndex2 == 1">
        <div class="serach-shop">
          <MainSearch placeholder="查找商品名称" />
          <div>
            <el-button>商品排序</el-button>
            <el-button @click="addShopShow">导入商品</el-button>
          </div>
        </div>
        <el-table :data="shopList" style="width: 100%">
          <el-table-column label="序号" width="100">
            <template #default="scope">
              <div>
                <img :src="scope.row.coverImgUrl" alt="" />
                <span style="margin-left: 10px; display: inline-block">{{
                  scope.row.name
                }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="商品信息" width="300">
            <template #default="scope">
              <!-- <i class="el-icon-time"></i> -->
              <span style="margin-left: 10px">￥{{ scope.row.price }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="100">
            <template #default="scope">
              <span style="margin-left: 10px">{{ scope.row.url }}</span>
            </template>
          </el-table-column>
          <el-table-column label="点击次数" width="100">
            <template #default="scope">
              <span style="margin-left: 10px">{{ scope.row.url }}</span>
            </template>
          </el-table-column>
          <el-table-column label="点击人数" width="100">
            <template #default="scope">
              <span style="margin-left: 10px">{{ scope.row.url }}</span>
            </template>
          </el-table-column>
          <el-table-column label="点赞次数" width="100">
            <template #default="scope">
              <span style="margin-left: 10px">{{ scope.row.url }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template #default="scope">
              <el-button
                type="info"
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >商品预览</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
              <el-button
                size="mini"
                type="primary"
                @click="handleModify(scope.$index, scope.row)"
                >修改价格</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <HyTable
      ref="HyTable"
      @myAddShop="myAddShop"
      :tableItems="tableItems"
      :tableData="tableData"
    ></HyTable>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import MainSearch from '@/components/main-header/src/main-search.vue'
import { GetRoomProductList, AddGoods } from '@/service/main/main'
import { HyTable } from '@/base-ui/table/index'
// import ControlTable from './control-table.vue'
import tableItems from '../config/tableItems-config'
export default defineComponent({
  components: { MainSearch, HyTable },
  props: {
    roomid: {
      type: String,
    },
  },
  async setup(props) {
    const HyTable = ref()
    onMounted(() => {
      return HyTable
    })
    //  索引
    const activeIndex = ref('1')
    const activeIndex2 = ref('1')
    const addShopShow = () => {}
    const handleSelect = (key: any, keyPath: any) => {
      console.log(key, keyPath)
    }
    const handleSelect2 = (key: any, keyPath: any) => {
      console.log(key, keyPath)
    }
    // 导入的商品列表
    const RoomProductList = await GetRoomProductList(0, 10, 26)
    let tableData = RoomProductList.Data
    // console.log(tableData)

    async function myAddShop(GoodsIds: number[]) {
      let roomid = props.roomid
      const addRes = await AddGoods(GoodsIds, roomid)
      if (addRes.errcode == 0) {
        console.log('关闭')
        HyTable.value.changeVisibility(false)
      }
    }
    return {
      activeIndex,
      activeIndex2,
      handleSelect,
      handleSelect2,
      tableData,
      tableItems,
      myAddShop,
      addShopShow,
      HyTable,
    }
  },
})
</script>

<style scoped lang="less">
.active {
  .propelling {
    font-size: 0.25rem;
    font-weight: bold;
  }
  .serach-shop {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
  }
}
</style>
